<template>
  <nav class="aside-wrapper">
    <el-card shadow="hover" class="user">
      <h3>博客专家</h3>
      <li v-for="i in userList" :key="i.id" class="list">
        <div class="avatar">
          <el-avatar size="large" src=""></el-avatar>
        </div>
        <div class="info">
          <div class="top">
            <div class="name">{{ i.name }}</div>
            <div class="address">{{ i.address }}</div>
          </div>
          <div class="body">
            <small class="article">文章：{{ i.skillNumber }}</small>
            <small class="qd">签到：{{ i.qd.length }}</small>
          </div>
        </div>
      </li>
    </el-card>
  </nav>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  props: {
    userList: {
      type: Array,
      default() {
        return []
      }
    }
  }
})
</script>

<style scoped lang="scss">
.aside-wrapper {
  flex: 0 0 300px;
  .user {
    width: 100%;
    h3 {
      width: 100%;
      height: 40px;
      line-height: 40px;
    }
    .list {
      width: 100%;
      display: flex;
      border-bottom: 1px solid #eee;
      padding: 10px 5px;
      cursor: pointer;
      &:hover {
        border: 1px solid #eee;
      }
      &:last-child{
        border-bottom: none;
      }
      .avatar {
        flex: 0 0 52px;
      }
      .info {
        flex: 1;
        .top, .body {
          display: flex;
          justify-content: space-between;
        }
        .body {
          color: #aaa;
        }
      }
    }
  }
}
</style>
